<template>
	<view>
		
		<u-navbar back-text="搜索" :backTextStyle="backTextColor" backIconColor="#fff" :background="background"></u-navbar>
		
		<view class="home">
			<u-search placeholder="请输入关键词搜索" v-model="keyword" :actionStyle="actionStyle"></u-search>
			<view class="u-m-t-20">
				<view class="u-flex u-row-between">
					<view class="title">历史记录</view>
					<view><u-icon name="trash" size="32"></u-icon></view>
				</view>
				<view v-for="result in filteredResults" :key="result.title" class="search-result" v-if="showDetail">
  <!-- <view class="result-title">{{ result.title }}</view>
  <view class="result-content">{{ result.content }}</view>
  <view class="result-imageSrc">
	  <image></image>
  </view> -->
  <!-- 其他要显示的搜索结果内容，例如图片等 -->
  <u-card :title="result.title" :sub-title="result.subTitle" :full="true" :border="false" :padding="20" margin="10rpx" :footBorderTop="false" :footStyle="footStyle" @click="toDetail(result)">
  	<view class="" slot="body">
  		<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
  			<view class="u-body-item-title u-font-sm u-line-3">{{result.content}}</view>
  		<view class="u-image-container">
  			<image :src="result.imageSrc"  class="u-body-item-image"></image>
  		</view>
  		</view>
  	</view>
  	<view class="" slot="foot">
  		<u-icon name="thumb-up-fill" size="32" color="#2BC3C8" label="30 点赞" labelSize="24" class="u-m-r-30"></u-icon>
  		<u-icon name="eye-fill" size="32" color="#2BC3C8" label="30 浏览" labelSize="24"></u-icon>
  	</view>
  </u-card>
</view>
			</view>
		</view>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				footStyle:{
					'paddingTop':'0rpx'
				},
				showDetail: false,
				items: [
				        {
						  id:'1',
				          title: '“你室友……”“你怎么知道我室友可好了！”',
				          subTitle: '2023-08-20',
				          content: 'O.o',
				          imageSrc: '/static/good.jpg',
				          likeCount: 30,
				          viewCount: 100
				        },
				        {
						  id:'2',
				          title: '新生报到须知',
				          subTitle: '2023-08-16',
				          content: 'o.O',
				          imageSrc: '/static/1.jpg',
				          likeCount: 20,
				          viewCount: 80
				        },
						{
						  id:'3',
						  title: '萌新指南|重大网站汇总',
						  subTitle: '2023-08-19',
						  content: 'O.O',
						  imageSrc: '/static/tipweb.jpg',
						  likeCount: 20,
						  viewCount: 80
						},
						{
						  id:'4',
						  title: '萌新指南|CQU教学楼',
						  subTitle: '2023-08-19',
						  content: 'QAQ',
						  imageSrc: '/static/cqubuilding.jpg',
						  likeCount: 20,
						  viewCount: 80
						},
				        // 添加其他循环项...
				      ],
				background: {
					'background-image': 'linear-gradient(45deg, #2BC3C8, #84E7B9)'
				},
				keyword:'',
				backTextColor: {
					'color': '#ffffff'
				},
				actionStyle:{
					'color':'#39CCCC',
				},
				filteredResults:[],
				contentList:[]	,	
			}
		},
		onLoad() {
			
		},
		created() {
		    // 获取 list 组件中的数据，并提取 content 属性
		    this.contentList =this.items;
		    // 进行首次搜索
		    this.performSearch();
		
		  },
		watch: {
		    keyword(newKeyword) {
				console.log(newKeyword)
				// console.log(this.contentList)
		        this.performSearch(); // 调用搜索逻辑函数
				this.showDetail = !this.showDetail;
		    }
		},
		methods:{
			performSearch() {
				
			       // 使用过滤逻辑筛选出与关键词相关的内容
			       // 例如，假设你的数据数组为 contentList
			       const keyword = this.keyword.toLowerCase();
			             // 在 list 组件的 content 中搜索关键词
			             this.filteredResults = this.items.filter(item => {
			               const title = item.title.toLowerCase();
			               return title.includes(keyword);
			             });
						 console.log(this.filteredResults)
						 },
		    toDetail(result) {
		        // 根据循环项的不同数据，跳转到不同的页面
		    					  console.log("6",result.id);
		        if (result.id === '1') {
		          this.$common.navigateTo('/pages/index/detail');
		    						
		        } else if (result.id === '2') {
		          this.$common.navigateTo('/pages/index/freshman1');
		        } else if (result.id === '3') {
		          this.$common.navigateTo('/pages/index/freshman2');
		        }
		    	  else if (result.id === '4') {
		    		 this.$common.navigateTo('/pages/index/freshman3');
		    			 }
		      },
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 32rpx;
		font-weight: 700;
	}
	.u-card-wrap {
	  background-color: $u-bg-color;
	  padding: 1px;
	}
	
	.u-body-item {
	  font-size: 32rpx;
	  color: #333;
	  padding: 20rpx 10rpx;
	  display: flex; /* 添加 flex 布局 */
	justify-content: space-between; /* 图片和内容之间产生空白，实现右对齐 */
	}
	
	.u-image-container {
	  flex: 0 0 auto; /* 让图片容器不占用多余的空间 */
	  width: 1200rpx; /* 设置容器宽度，可以根据需要进行微调 */
	  height: 120rpx; /* 设置容器高度，保持和宽度相等 */
	}
	
	.u-body-item-image {
	  width: 200rpx;
	  height: 120rpx;
	  border-radius: 8rpx;
	  
	  object-fit: cover; /* 设置图片等比例缩放，保持图片填满容器 */
	}
</style>
